const API_DATA = {
    code: 200,
    data: [
        {
            name: '哪吒',
            avatar: 'http://10.2.35.4/nezha2/nezha.jpg',
            desc: '我命由我不由天，是魔是仙，我自己说了才算！',
            animateFlag: 'bounceIn'
        },
        {
            name: '敖丙',
            avatar: 'http://10.2.35.4/nezha2/aobing.webp',
            desc: '哪吒是我最好的朋友！',
            animateFlag: 'zoomIn'
        },
        {
            name: '敖闰',
            avatar: 'http://10.2.35.4/nezha2/aorun.jpg',
            desc: '西海龙王——白龙马之母，敖光的妹妹',
            animateFlag: 'fadeIn'
        },
        {
            name: '敖光',
            avatar: 'http://10.2.35.4/nezha2/aoguang.jpg',
            desc: '东海龙王，帅的没边',
            animateFlag: 'flip'
        },
        {
            name: '太乙真人',
            avatar: 'http://10.2.35.4/nezha2/taiyi.jpeg',
            desc: '你打我噻~你打我噻',
            animateFlag: 'flash'
        }, {
            name: '申公豹',
            avatar: 'http://10.2.35.4/nezha2/shengongbao.jpg',
            desc: '人心中的成见是一座大山',
            animateFlag: 'slideInUp'
        }
    ],
    message: 'success'
}
import { useState, useEffect } from "react";
import ListItem from "./ListItem";
function List() {
    const [data, setData] = useState([])
    const [loading, setLoading] = useState(false)
    useEffect(() => {
        setLoading(true)  // 开始加载
        setTimeout(() => {
            setData(API_DATA.data)
            setLoading(false) // 加载完成
        }, 3000);
    }, [])

    // 返回组件内容
    return <>
        <h1>《哪吒2魔童闹海》</h1>
        {loading ? <div>加载中...</div> : data.map((item, index) => {
            // 如果loading为true，则显示加载中，否则遍历data数组，渲染每个item
            // item是一个对象，当中有name、avatar、desc三个属性
            // ...item === name={item.name} + avatar={item.avatar} + desc={item.desc}
            return <ListItem key={index} {...item} />
        })}

    </>
}
export default List